<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>二手车比价系统</title>
    <style>
        *{
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
        }
        .search{
            display: flex;
            /*border: 1px solid red;*/
        }
        .search input{
            float: left;
            flex: 4;
            height: 40px;
            outline: none;
            border: 1px solid #0057ad;
            box-sizing: border-box;
        padding-left: 10px;
        }
        .search button{
            float: right;
            flex: 1;
            height: 40px;
            background-color: #0057ad;
            color: white;
            border-style: none;
            outline: none;
        }
        .search button i{
            font-style: normal;
        }
        .search button:hover{
            font-size: 16px;
        }

        #buttons{
            display: flex;
            margin-top: 10px;
        }

        #buttons button{
            float: right;
            flex: 1;
            height: 40px;
            background-color: #0057ad;
            color: white;
            border-style: none;
            outline: none;
            margin: 0 1px;
        }
        #buttons button i{
            font-style: normal;
        }
        #buttons button:hover{
            font-size: 16px;
        }

        .btn{
            display: flex;
            margin-top: 10px;
        }

        .btn button{
            float: right;
            flex: 1;
            height: 40px;
            background-color: #0057ad;
            color: white;
            border-style: none;
            outline: none;
            margin: 0 1px;
        }
        .btn button i{
            font-style: normal;
        }
        .btn button:hover{
            font-size: 16px;
        }

        body{
            font-family: Helvetica;
            -webkit-font-smoothing: antialiased;
            background: rgba( 71, 147, 227, 1);
        }
        h2{
            text-align: center;
            font-size: 18px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: white;
            padding: 30px 0;
        }

        /* Table Styles */

        .table-wrapper{
            /*margin: 10px auto;*/
            box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );
        }

        .fl-table {
            border-radius: 5px;
            font-size: 12px;
            font-weight: normal;
            border: none;
            border-collapse: collapse;
            width: 100%;
            max-width: 100%;
            white-space: nowrap;
            background-color: white;
            table-layout: fixed;
        }

        .fl-table td, .fl-table th {
            text-align: center;
            padding: 8px;
        }

        .fl-table td {
            border-right: 1px solid #f8f8f8;
            font-size: 12px;
        }

        .fl-table thead th {
            color: #ffffff;
            background: #4FC3A1;
        }


        .fl-table thead th:nth-child(odd) {
            color: #ffffff;
            background: #324960;
        }

        .fl-table tr:nth-child(even) {
            background: #F8F8F8;
        }
    </style>
</head>
<body>
    <div class="search">
        <input id="st" type="text" placeholder="请输入..." name="" value="" />
        <button id="sb"><i>搜索</i></button>
    </div>
    <div id="buttons">
        <button><i>宝来</i></button>
        <button><i>高尔夫</i></button>
        <button><i>polo</i></button>
        <button><i>速腾</i></button>
        <button><i>朗逸</i></button>
        <button><i>桑塔纳</i></button>
        <button><i>帕萨特</i></button>
        <button><i>迈腾</i></button>
        <button><i>途观</i></button>
    </div>

    <div class="btn">
        <button><i>好车推荐</i></button>
    </div>
    <div class="table-wrapper">
        <table class="fl-table">
            <thead>
            <tr>
                <th style="width: 30%;">标题</th>
                <th>年份</th>
<!--                <th>排量</th>-->
<!--                <th>档位</th>-->
                <th>价格</th>
                <th>市价</th>
                <th>可信</th>
                <th>链接</th>
                <th>更新</th>
                <th>屏蔽</th>
            </tr>
            </thead>
            <tbody id="recommend">

            <tbody>
        </table>
    </div>

    <div class="btn">
        <button id="market"><i>查看市场价</i></button>
    </div>
    <div class="table-wrapper">
        <table class="fl-table">
            <thead>
                <tr>
                    <th>车型</th>
                    <th>年份</th>
                    <th>排量</th>
                    <th>档位</th>
                    <th>参考价</th>
                    <th>可信度</th>
                    <th>更新日期</th>
                </tr>
            </thead>
            <tbody id="tbody">
            <tbody>
        </table>
    </div>


    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.5.1/jquery.min.js" type="application/javascript"></script>
    <script type="text/javascript">
        $(function(){
            // $.ajax({
            //     url:"/getPriceAll",    //请求的url地址
            //     dataType:"json",   //返回格式为json
            //     async:false,//请求是否异步，默认为异步，这也是ajax重要特性
            //     // data:data,    //参数值,键值对
            //     type:"GET",   //请求方式
            //     success:function(data){
            //         $.each(data,function (){
            //             $("#tbody").append("<tr>" +
            //                 "<td>"+this.key+"</td>" +
            //                 "<td>"+this.year+"</td>" +
            //                 "<td>"+this.l+"</td>" +
            //                 "<td>"+this.dang+"</td>" +
            //                 "<td>"+this.price.toFixed(2)+"</td>" +
            //                 "<td>"+this.count+"</td>" +
            //                 "<td>"+new Date(this.time).toLocaleDateString()+"</td>" +
            //                 "</tr>")
            //         })
            //     }
            // });

            $("#sb").click(function (){
                var data = {"key":$("#st").val()}
                $.ajax({
                    url:"/getPriceAll",    //请求的url地址
                    dataType:"json",   //返回格式为json
                    async:false,//请求是否异步，默认为异步，这也是ajax重要特性
                    data:data,    //参数值,键值对
                    type:"GET",   //请求方式
                    success:function(data){
                        $.each(data,function (){
                            $("#tbody").append("<tr>" +
                                "<td>"+this.key+"</td>" +
                                "<td>"+this.year+"</td>" +
                                "<td>"+this.l+"</td>" +
                                "<td>"+this.dang+"</td>" +
                                "<td>"+this.price.toFixed(2)+"</td>" +
                                "<td>"+this.count+"</td>" +
                                "<td>"+new Date(this.time).toLocaleDateString()+"</td>" +
                                "</tr>")
                        })
                    }
                });
            })
            var key
            $("#buttons").find("button").click(function(){
                var data = {"key":$(this).text().trim()}
                key = $(this).text().trim()
                $.ajax({
                    url:"/getRecommend",    //请求的url地址
                    dataType:"json",   //返回格式为json
                    async:false,//请求是否异步，默认为异步，这也是ajax重要特性
                    data:data,    //参数值,键值对
                    type:"GET",   //请求方式
                    success:function(data){
                        if(data.length==0){
                            $("#recommend").html("<tr><td>无推荐</td></tr>");
                        }else{
                            $("#recommend").html("");
                        }

                        $.each(data,function (){
                            $("#recommend").append("<tr>" +
                                "<td class='t-name' style='overflow: hidden;'>"+this.car.title+"</td>" +
                                "<td>"+this.car.year+"</td>" +
                                // "<td>"+this.info.l+"</td>" +
                                // "<td>"+this.info.dang+"</td>" +
                                "<td>"+this.car.price.replace("¥","").replace("万","")+"</td>" +
                                "<td>"+(this.info==undefined?"":(this.info.price*0.8).toFixed(2))+"</td>" +
                                "<td>"+(this.info==undefined?"":this.info.count)+"</td>" +
                                "<td><a href='"+this.car.url+"'>跳转</a></td>" +
                                "<td>"+new Date(this.car.updateTime).toLocaleDateString().replace("2021/","")+"</td>" +
                                "<td><a class='enable' name='"+this.car.id+"' href='#'>屏蔽</a></td>" +
                                "</tr>")
                        })
                    }
                });
            })

            $("#recommend").delegate(".t-name","click",function(){
                alert($(this).text().trim())
            })

            $("#recommend").delegate(".enable","click",function(){
                var doc = $(this)
                var data = {"id":doc.attr("name")}
                doc.parent().parent().remove()
                $.ajax({
                    url:"/enable",    //请求的url地址
                    dataType:"json",   //返回格式为json
                    async:false,//请求是否异步，默认为异步，这也是ajax重要特性
                    data:data,    //参数值,键值对
                    type:"GET",   //请求方式
                    success:function(data){

                    }
                });
            })

            $("#market").click(function (){
                var data = {"key":key}
                $.ajax({
                    url:"/getPriceAll",    //请求的url地址
                    dataType:"json",   //返回格式为json
                    async:false,//请求是否异步，默认为异步，这也是ajax重要特性
                    data:data,    //参数值,键值对
                    type:"GET",   //请求方式
                    success:function(data){
                        $("#tbody").html("");
                        console.log(data)
                        $.each(data,function (){
                            $("#tbody").append("<tr>" +
                                "<td>"+this.keyword+"</td>" +
                                "<td>"+this.year+"</td>" +
                                "<td>"+this.output+"</td>" +
                                "<td>"+this.type+"</td>" +
                                "<td>"+(this.price*0.8).toFixed(2)+"</td>" +
                                "<td>"+this.count+"</td>" +
                                "<td>"+new Date(this.updateTime).toLocaleDateString().replace("2021/","")+"</td>" +
                                "</tr>")
                        })
                    }
                });
            })
        })
    </script>
</body>
</html>